<html>
    <head>
        <meta charset="utf-8">
        <title>加载矢量瓦片图层</title>
        <!-- leaflet的css样式 -->
        <link rel="stylesheet" href="../lib/leaflet.css" />
        <!-- leaflet的js库 -->
        <script type="text/javascript" src="../lib/leaflet-src.js"></script>

        <!-- <script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>
        <script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.js"></script> -->

        <script type="text/javascript" src="../lib/plugins/Leaflet.VectorGrid-1.3.0/Leaflet.VectorGrid.bundled.js"></script>
        <script type="text/javascript" src="../lib/plugins/Leaflet.VectorGrid-1.3.0/Leaflet.VectorGrid.js"></script>

        <!-- 地图容器样式 -->
        <style>
            #mapDiv{
                width: 100%;
                height: 100%;
            }
        </style>

        <script type="text/javascript">
            var map = null; 

            function init(){

                map = L.map("mapDiv", { 
                    center: [0,0],
                    zoom: 1,
                });

                //加载TMS协议的瓦片图层
                L.tileLayer( 
                    'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
                ).addTo(map);

                //定义矢量瓦片样式
                var vectorTileStyling = {
                    country: {
                        fill: true,
                        weight: 1,
                        fillColor: '#ff0000',
                        color: '#06cccc',
                        fillOpacity: 0.2,
                        opacity: 0.4,
                    },
                };

                //定义矢量瓦片图层的options参数
                var pbfVectorTileOptions = {
                    rendererFactory: L.canvas.tile,                    
                    vectorTileLayerStyles: vectorTileStyling,
                };

                //定义矢量瓦片的TMS服务地址
                var pbfUrl = "http://127.0.0.1/geoserver/gwc/service/tms/1.0.0/radi%3Acountry@EPSG%3A900913@png/{z}/{x}/{y}.pbf";
                // 创建pbf类型的矢量瓦片图层，并添加到地图上
                L.vectorGrid.protobuf(
                                pbfUrl, 
                                pbfVectorTileOptions
                            ).addTo(map);
                            
            }
        </script>
            
    </head>
    <body onload="init()">
        <!--地图的容器-->
        <div id="mapDiv"></div>
    </body>
</html>



